<template>
    <div>
      <Row :style="{'margin-bottom':'10px'}">
        <Alert>提供的功能：竞赛团队的管理。</Alert>
        <Button type="primary" icon="md-add" @click="openUserGroup($event,'add')">创建竞赛团队</Button>
      </Row>
      <Table stripe :columns="accessListColumns" :data="accessGroupList" :row-class-name="rowClassName" @on-select="selectGroup"
             @on-select-all="selectGroup" @on-select-cancel="selectGroup" @on-select-all-cancel="selectGroup">
      </Table>
      <Modal v-model="showModel" :title="modelTitle" :width="600" @on-ok="addAccessGroup" :mask-closable = "false"
             @on-cancel="handleReset" :loading="loading">
        <Form ref="groupFormValidate" :model="groupFormValidate" :rules="groupRuleValidate" :label-width="80">
          <FormItem label="名称" prop="name">
            <Input v-model.trim="groupFormValidate.name" placeholder="请输入名称"></Input>
          </FormItem>
          <FormItem label="团队" prop="groupName">
            <Input v-model.trim="groupFormValidate.groupName" placeholder="选择团队"></Input>
          </FormItem>
          <FormItem label="描述" prop="description">
            <Input type="textarea" :maxlength="200" :rows="4" v-model.trim="groupFormValidate.description" placeholder="描述信息"></Input>
          </FormItem>
        </Form>
      </Modal>
    </div>
</template>

<script>
	export default {
		name: "componentUserGroup",
    data(){
		  return {
		    showModel:false,
        type:1,
        modelTitle:'创建接入组',
        loading:true,
        queryObj:{
		      pageIndex:1,
          pageSize:10
        },
        accessListColumns: [
          {
          type: 'selection',
          width: 60,
          align: 'center'
        },
          {
            title: '名称',
            key: 'name',
            align: 'center'
          },
          {
            title: '创建者',
            key: 'creatorName',
            align: 'center'
          },
          {
            title: '禁赛状态',
            key: 'forbitStatus',
            align: 'center',
            render: (h, params) => {
              return h('span',
                {
                  style: {
                    color: params.row.forbitStatus==1?'green':'red',
                  }
                },
                this.runningFilter(params.row.forbitStatus))
            }
          }
        ],
        accessGroupList:[],
        groupFormValidate: {
          name: '',
          description: '',
          groupName:''
        },
        groupRuleValidate: {
          name: [{
            required: true,
            message: '竞赛团队名称不能为空',
            trigger: 'change'
          }],
          groupName: [{
            required: true,
            message: '请选择团队',
            trigger: 'change'
          }],
        },
      }
    },
    methods:{
		  initUserGroup(){
        this.showModel = true;
        this.type = 1;
        this.modelTitle = '创建接入组';
        this.groupFormValidate = {
          name: '',
          description: '',
          groupName:''
        }
      },
      openUserGroup(passObj,type){
		    this.initUserGroup();
		    if(type==='modify'){
          this.type = 2;
          this.modelTitle = '修改接入组';
          this.groupFormValidate = {...passObj}
        }

      },
      selectGroup(selection) {
        this.selectGroupList = selection;
      },
      addAccessGroup(){
        let _this = this;
        let params = {...this.groupFormValidate}
        this.$refs['groupFormValidate'].validate((valid) => {
          if (valid) {
            if (this.type === 1) {
              addKnowledgeGroup(params).then(data => {
                if (data.code == 1) {
                  this.$Message.info('操作成功');
                  this.showModel = false;
                } else {
                  setTimeout(() => {
                    this.loading = false;
                    this.$nextTick(() => {
                      this.loading = true;
                    });
                  }, 500)
                  this.$Message.warning(data.message);
                }
                this.getAccessGroupList()
              })
            } else {
              modifyKnowledgeGroup(params).then(data => {
                if (data.code == 1) {
                  this.$Message.info('操作成功');
                  this.show = false;
                } else {
                  setTimeout(() => {
                    this.loading = false;
                    this.$nextTick(() => {
                      this.loading = true;
                    });
                  }, 500)
                  this.$Message.warning(data.message);
                }
                this.getAccessGroupList();
              })
            }
          } else {
            setTimeout(() => {
              _this.agLoading = false;
              _this.$nextTick(() => {
                _this.agLoading = true;
              });
            }, 500)
          }
        })
      },
      getAccessGroupList(){
        getAccessGroupList(this.queryObj).then(data => {
          if (data.code == 1) {
            this.accessGroupList = data.attribute.dataList;
            this.total = data.attribute.total

          } else if (data.code == -2) {
            this.accessGroupList = [];
          } else {
            this.$Message.warning(data.message);
          }
        })
      }


    }
	}
</script>

<style scoped>

</style>
